<template>
    <el-row>
        <el-col class="btn">

            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">

                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <div class="box box-algin-center box-pack-between" style="width: 100%;">
                    <el-input class="ml20" placeholder="搜索" v-model="name" style="width: 200px;">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click="getCourseList()"></i>
                    </el-input>
                </div>
                <div class="user-list radio" v-if="list.length !=0">
                    <el-checkbox-group v-model="checkedSj" @change="handleCheckedSjChange">
                        <el-checkbox v-for="(item,index) in list" :label="item.id" :key="index">
                            <div class="list box box-align-center mt20">
                                <div class="item box box-align-center box-pack-between">
                                    <div class="box box-pack-start box-align-center ml20" style="width: 100%;overflow: hidden;">
                                        <el-image :src="item.img" class="img"></el-image>
                                        <div class="box box-tb box-pack-start box-align-start ml20">
                                            <h3 style="width: 200px;overflow: hidden;text-align: left;">{{item.title}}
                                            </h3>
                                            <span class="mt10 mb10">劳动目标：</span>
                                            <span style="overflow: hidden;white-space: normal;text-overflow: ellipsis;display: block;width: 100%;text-align: left;height: 40px;">{{item.ldmb}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-col class="mt10">
                        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                            :total="ipagination.total" :current-page="ipagination.current" :page-size="ipagination.rows"
                            hide-on-single-page></el-pagination>
                    </el-col>
                </div>
                <div v-else class="box box-align-center box-pack-center">
                    <el-empty description="暂无数据" :image-size="100"></el-empty>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()" :disabled="disabledbtn==false">确 定
                    </el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    import {
        getActionV3
    } from '@/http/axios.js'
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '添加课程任务'
            },
        },
        data() {
            return {
                name:'',
                searchText: '',
                ldkcList: [],
                loginInfo: this.$store.state.loginInfo,
                form: {
                    radio: {}
                },
                disabledbtn: false,
                schoolid: this.$store.state.schoolId,
                checkedSj: [],
                page: {
                    list: [],
                    pageNum:1,
                    pageSize:8,
                    total:0
                },
                list: [],
                ipagination: {
                    total: 0,
                    rows: 8,
                    page: 1,
                    current: 1
                }
            };
        },
        mounted() {},
        methods: {
            getCourseList() {
                let params = Object.assign({}, this.ipagination)
                params.type = ''
                params.name = this.name

                let url = '/ldsj/public'
                getActionV3(url, params).then(res => {
                    console.log(res);
                    if (res.code === 200) {
                        this.list = res.data.records;
                        this.ipagination.total = res.data.total
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleCurrentChange(val) {
                this.ipagination.page = val
                this.getCourseList()
            },
            // getCourseList(pageNum) {
            //     this.form.radio = '';
            //     let params = {
            //         seachText:this.searchText,
            //         schoolid:this.schoolid,
            //         pageNum:pageNum,
            //         pageSize:this.page.pageSize

            //     };
            //     this.$ajax.post('/yldsjpublic/teamsjlist', params).then(res => {
            //         console.log(res);
            //         if (res.code == '0') {
            //             this.page= res.page
            //         } else {
            //             this.$message.error('请求失败！');
            //         }
            //     })
            // },
            handleClose() {
                this.$emit('clickClose')
            },
            onSubmit() {
                this.$emit('saveCous', this.checkedSj)
                this.handleClose();
            },
            clk() {
                this.disabledbtn = true;
            },
            handleCheckedSjChange(value) {

                let checkedCount = value.length;
                if(checkedCount!=0){
                    this.disabledbtn = true
                }else{
                    this.disabledbtn = false
                }
                // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                console.log(checkedCount);
                console.log(this.checkedSj);
            }
        }
    };
</script>

<style scoped lang="scss">
    .upload-icon {
        width: 110px;
        height: 110px;
        background-color: #F0F1F8;
        line-height: 110px;
        color: #626BF1;
        font-size: 30px;
        border-radius: 10px;
    }

    .avatar {
        width: 110px;
        height: 110px;
    }

    .w100 {
        width: 100%;
    }

    .reset-form {
        padding: 0 20px;
    }


    .user-list {
        height: 500px;
        overflow-x: hidden;
        overflow-y: scroll;

        .checkbox__label {
            width: 80%;
        }

        .list {
            width: 500px;
            height: 86px;
            background: #F8F9FC;
            border: 1px solid #F8F9FC;
            border-radius: 12px;
        }

        .right {
            box-sizing: border-box;
            padding: 10px 0;
            width: 100px;
            height: 86px;

            .title {
                width: 134px;
                height: 20px;
                line-height: 20px;
                background: #F3F4FB;
                border-radius: 9px;
                color: #939FF4;
                font-size: 14px;
            }
        }

        .item {
            display: flex;
            width: 100%;
            margin-right: 30px;

            .img {
                width: 98px;
                height: 74px;
                border-radius: 12px;
            }
        }
    }

    /deep/ .el-image {
                width: 100px;
                min-width: 100px;
                height: 74px;
                border-radius: 12px;
            }


  .user-list {

      .checkbox__label {
          width: 80%;
      }

      .list {
          padding: 10px 0;
      }


  }

  .user-list>>>.el-checkbox {
      // padding: 0 20px;
      width: 585px;
      margin-right: 0;
      display: flex;
      justify-content: center;
  }

  .user-list>>>.el-checkbox__label {
      .list {
          display: flex;
          color: #000000;
      }
  }

  .user-list>>>.el-checkbox__input {
      display: flex;
      align-items: center;
  }

  .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #626BF1;
      border-color: #626BF1;
  }

  .user-list>>>.el-checkbox__inner:hover {
      border-color: #626BF1;
  }

  .user-list>>>.el-checkbox__input.is-focus,
      {
      border-color: #626BF1;

      .el-checkbox__inner {
          border-color: #626BF1;
      }
  }
</style>
